<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Cabinet CW01 demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="format-detection" content="telephone=no">
    <!--<script type="text/javascript" src="js/adaptive.js"></script>-->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../../element-ui/index.ml.css">
    <script type="text/javascript" src="../../js_code/jquery-3.6.1.min.js?v=2"></script>
    <script type="text/javascript" src="../../element-ui/vue.js"></script>
    <!-- import JavaScript -->
    <script type="text/javascript" src="../../element-ui/index.en.js"></script>

    <script src="../../js_code/underscore-min.js"></script>
    <script src="../../js_code/jquery-3.6.1.min.js"></script>
    <script src="../../js_code/iotauth.js"></script>
    <script src="../../js_code/v5_cw01_demo.js"></script>
    <script>
        function refresh2() {
            window.location.reload();
        }
    </script>
    <style>
        .box-card {
            display: inline-block;
        }
    </style>
</head>
<body class="big_show">

<div style="display: block">
    <input id="base_url" value="https://api.bestwond.com" style="width: 200px;border-radius: 5px;">
    <input id="app_id" value="bw_e88b5168008111e" style="width: 200px;border-radius: 5px;">
    <input id="device_number" value="2000012489" style="width: 200px;border-radius: 5px;">
    <input id="app_secret" value="e88b5280008111ef85d400163e198b20" style="width: 200px;border-radius: 5px;">
    <!-- <button onclick="getDevice()">Get Device List</button> -->
</div>
<div id="app" class="screen_app" style="margin-top: 20px;">
	<el-form :inline="true" :model="formInline" class="demo-form-inline">
	  <el-form-item>
	    <el-button type="primary" @click="addOrder">New order</el-button>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click="getDevice">Device List</el-button>
	  </el-form-item>
	</el-form>
	  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
	    <el-form :model="dialogForm">
	      <el-form-item label="User Account" :label-width="formLabelWidth">
	        <el-input v-model="dialogForm.user_phone" autocomplete="off"></el-input>
	      </el-form-item>
		  <el-form-item label="User Password" :label-width="formLabelWidth">
		    <el-input v-model="dialogForm.user_email" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="Device Number" :label-width="formLabelWidth">
		    <el-input v-model="dialogForm.device_number" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="Use hours" :label-width="formLabelWidth">
		    <el-input v-model="dialogForm.use_hours" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="Pay status" :label-width="formLabelWidth">
			  <el-select v-model="dialogForm.pay_status" placeholder="请选择">
			      <el-option label="Paid" value="1"></el-option>
				  <el-option label="Unpaid" value="0"></el-option>
			  </el-select>
		  </el-form-item>
		  <el-form-item label="Box size" :label-width="formLabelWidth">
			  <el-select v-model="dialogForm.box_size" placeholder="请选择">
			      <el-option label="S" value="S"></el-option>
				  <el-option label="M" value="M"></el-option>
				  <el-option label="L" value="L"></el-option>
				  <el-option label="XL" value="XL"></el-option>
			  </el-select>
		  </el-form-item>
	    </el-form>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogFormVisible = false">Cancel</el-button>
	      <el-button type="primary" @click="yesBtn">Confirm</el-button>
	    </div>
	  </el-dialog>
	  <el-dialog title="Device List" :visible.sync="dialogDeviceVisible" width="50%">
	    <el-table
		  :data="deviceList"
		  style="width: 100%">
		  <el-table-column
			prop="device_name"
			label="Device Name">
		  </el-table-column>
		  <el-table-column
			prop="device_number"
			label="Device Number">
		  </el-table-column>
		  <el-table-column
			prop="device_address"
			label="Address">
		  </el-table-column>
		  <el-table-column
			fixed="right"
			label="操作"
			width="100">
			<template slot-scope="scope">
			  <el-button @click="handleClick(scope.row)" type="text" size="small">Box List</el-button>
			</template>
		  </el-table-column>
		</el-table>
		
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogDeviceVisible = false">Cancel</el-button>
	    </div>
	  </el-dialog>
	  <el-dialog title="Device List" :visible.sync="dialogBoxVisible" width="50%">
	    <div style="display: flex;flex-wrap: wrap;">
			<div v-for="(item,index) in boxList" style="width: 50px;height: 50px;line-height: 50px;text-align: center;margin-right: 5px;margin-bottom: 5px;background-color: #909399;color: #fff;">{{item.box_name}}</div>
		</div>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogBoxVisible = false">Cancel</el-button>
	    </div>
	  </el-dialog>
</div>
</div>
</body>

<script>
    bw = new Vue({
        el: '#app',
        data: {
            tableData: [],
			formInline:{
				page_num:1,
				page_size:10
			},
			total:0,
			deviceList:[],
			dialogFormVisible:false,
			formLabelWidth:"120px",
			dialogDeviceVisible:false,
			dialogBoxVisible:false,
			boxList:[],
			dialogForm:{
			},
			title:'Add',
			options: [{
			  value: 'CONFIRMED',
			  label: 'CONFIRMED'
			}, {
			  value: 'CHECK_OUT',
			  label: 'CHECK_OUT'
			}, {
			  value: 'ONGOING',
			  label: 'ONGOING'
			}, {
			  value: 'CHECK_IN',
			  label: 'CHECK_IN'
			}, {
			  value: 'IN_PROGRESS',
			  label: 'IN_PROGRESS'
			}],
        },
        created: function () {
			this.getOrder()
        },
        methods: {
			getDevice(){
				let data = kd.bw_api('/api/iot/device/list/',{})
				console.log(data)
				if(data.code == 0){
					this.dialogDeviceVisible = true
					this.deviceList= data.data
				}else{
					this.$message.error(data.msg)
				}
			},
			handleSizeChange(val){
				this.formInline.page_size = val
				this.getOrder()
			},
			handleCurrentChange(val){
				this.formInline.page_num = val
				this.getOrder()
			},
			addOrder(){
				this.title = 'Add'
				this.dialogFormVisible = true
			},
			getOrder(){
				let data = kd.bw_api('/api/iot/v5/get/orders/',this.formInline)
				console.log(data)
				if(data.code == 0){
					this.tableData = data.data.list
					this.total = data.data.page.total_count
				}else{
					this.$message.error(data.msg)
				}
			},
			yesBtn(){
				let dataFrom = {
					"app_id": $('.app_id').val(),
					"device_number":this.dialogForm.device_number,
					"user_phone": this.dialogForm.user_phone,
				    "user_email": this.dialogForm.user_email,
				    "use_hours": this.dialogForm.use_hours,
				    "pay_status": this.dialogForm.pay_status,
				    "box_size": this.dialogForm.box_size
				}
				let data = kd.bw_api('/api/iot/cw/sync/order/',dataFrom)
				console.log(data)
				if(data.code == 0){
					this.$message.success('success')
					this.dialogForm = {}
					this.getOrder()
					this.dialogFormVisible = false
				}else{
					this.$message.error(data.msg)
				}
				
			},
			editOrder(data){
				this.title = 'Edit'
				this.dialogFormVisible = true
				this.dialogForm = JSON.parse(JSON.stringify(data))
			},
			updateOrder(data){
				let dataFrom = {
					"device_number":data.device_number,
					"order_id": data.order_id,
					"status":"ONGOING"
				}
				let dataT = kd.bw_api('/api/iot/v5/update/order/',dataFrom)
				console.log(dataT)
				if(dataT.code == 0){
					this.getOrder()
					this.$message.success('success')
				}else{
					this.$message.error(dataT.msg)
				}
			},
			handleClick(deviceInfo){
				let data = kd.bw_api('/api/iot/device/box/list/',{device_number:deviceInfo.device_number})
				console.log(data)
				if(data.code == 0){
					this.dialogBoxVisible = true
					this.boxList= data.data
				}else{
					this.$message.error(data.msg)
				}
			}
        }
    });
</script>
</html>
